<template>
  <div class="container mx-auto px-4 py-8">
    <h1 class="text-3xl font-bold mb-8" :class="colorMode.value === 'dark' ? 'text-white' : 'text-gray-900'">最新新闻</h1>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <div v-for="news in newsList" :key="news.id" 
           class="rounded-lg shadow-md overflow-hidden transition-transform hover:scale-105"
           :class="colorMode.value === 'dark' ? 'bg-gray-800' : 'bg-white'">
        <img :src="news.image" :alt="news.title" class="w-full h-48 object-cover">
        <div class="p-4">
          <h2 class="text-xl font-semibold mb-2" :class="colorMode.value === 'dark' ? 'text-white' : 'text-gray-900'">{{ news.title }}</h2>
          <p class="mb-4" :class="colorMode.value === 'dark' ? 'text-gray-300' : 'text-gray-600'">{{ news.summary }}</p>
          <div class="flex justify-between items-center">
            <span class="text-sm" :class="colorMode.value === 'dark' ? 'text-gray-400' : 'text-gray-500'">{{ news.date }}</span>
            <NuxtLink :to="'/news/' + news.id" 
                     class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">
              阅读更多
            </NuxtLink>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const colorMode = useColorMode()
const newsList = ref([
  {
    id: 1,
    title: '科技创新推动经济发展',
    summary: '最新研究显示，人工智能和区块链技术正在重塑传统产业...',
    image: 'https://picsum.photos/800/600',
    date: '2024-04-03'
  },
  {
    id: 2,
    title: '全球气候变化最新报告',
    summary: '联合国发布最新气候报告，呼吁各国采取紧急行动...',
    image: 'https://picsum.photos/800/601',
    date: '2024-04-02'
  },
  {
    id: 3,
    title: '教育改革的未来展望',
    summary: '专家探讨如何利用技术改善教育质量和可及性...',
    image: 'https://picsum.photos/800/602',
    date: '2024-04-01'
  }
])
</script> 